<template>
  <div class="index">
   <header>
     <myheader></myheader>
     <nav><navi></navi></nav>
     <banner></banner>
   </header>
    <section>
     <div class="leftPane"></div>
      <div class="contentPane"></div>
    </section>
    <section class="teamSec"><team></team></section>
    <footer></footer>
  </div>
</template>

<script>
  import navi from '@/components/public/navi/navi.vue';
  import myheader from '@/components/public/header/myheader.vue';
  import banner from '@/components/public/banner/banner.vue';
  import team from '@/components/team/team.vue';
export default {
  name: 'index',
  data () {
    return {
      msg: 'footballapp'
    }
  },
  components:{
    navi,
    myheader,
    banner,
    team
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
header
  margin 0 auto
  width 1280px
  position relative

  nav
    position absolute
    margin-left auto
    margin-right auto
    width 1280px;
    height 200px;
    z-index 5
.teamSec
    margin-top 20px;
</style>
